<template>
    <div class="home">
      <home-header></home-header>

      <home-swiper :swiperList="swiperList"></home-swiper>

      <home-icons :iconsList="iconsList"></home-icons>

      <home-location></home-location>

      <home-hot :hostList="hostList"></home-hot>

      <home-like :likeList="likeList"></home-like>

      <home-weekends :weekendsList="weekendsList"></home-weekends>
    </div>
</template>

<script>
import {mapState} from 'vuex'
import  HomeHeader from './pages/Header'
import  HomeSwiper from './pages/Swiper'
import  HomeIcons from './pages/Icons'
import  HomeLocation from './pages/Location'
import  HomeHot from './pages/Hot'
import  HomeLike from './pages/Like'
import  HomeWeekends from './pages/Weekends'
export default {
  components:{
    HomeHeader,
    HomeSwiper,
    HomeIcons,
    HomeLocation,
    HomeHot,
    HomeLike,
    HomeWeekends,
  },
  data(){
    return{
      swiperList:[],
      iconsList:[],
      hostList:[],
      likeList:[],
      weekendsList:[],
      changeCity:''
    }
  },
  computed:{
    ...mapState(['city'])
  },
  methods:{
    getHttp(){
      this.$http.get("/api/data.json")
        .then((res)=>{
          const data =res.data.data;
          data.forEach((item,index)=>{
            if(item.city==this.city) {
              this.swiperList=item.swiperList;
              this.iconsList=item.iconsList;
              this.hostList=item.hostList;
              this.likeList=item.likeList;
              this.weekendsList=item.weekendsList;
            }
          })
        })
    }
  },
  mounted() {
    this.changeCity = this.city
    this.getHttp()
  },
  activated() {
    if(this.changeCity != this.city){
       this.getHttp();
       this.changeCity = this.city
    }
  }
}
</script>

<style scoped>
.home{
  background:	#F8F8FF;
}
</style>
